<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>为什么组件中的data必须是个函数</title>
</head>

<body style="height: 1000px">
    <div id="app1">
        <h2>实例1 数量</h2>
        <div>-----实例1--------全局组件内容----------</div>
        <comp></comp>
    </div>
    <div>====================================================</div>
    <div id="app2">
        <h2>实例2 价格</h2>
        <div>------实例2-------全局组件内容----------</div>
        <comp></comp>
    </div>
    <div>====================================================</div>
    <div id="app3">
        <h2>实例3 计数</h2>
        <div>------实例3-------全局组件内容----------</div>
        <comp></comp>
    </div>

    <template id="comp">
    <div>
        <p>总数: {{compNum}}</p>
        <button @click="compNum++">+</button>
        <button @click="compNum--">-</button>
    </div>
</template>

    <script src="./vue.js"></script>
    <script>
        /**
         *
         *  面试题: 为什么组件中的data必须是个函数?
         *      1.如果不是一个函数 那么就会报错
         *  //The "data" option should be a function that returns a per-instance value in component definitions.
         *      2.从组件封装的角度来说,一个组件可能在任何地方被多次的使用,此时,操作其中一个组件中的数据或者其他信息, 应该是不能影响到其他同类组建的 ==>面向对象编程思想
         *      3.data其实必须是一个函数还有一个原因就在于,一个普通的对象是一个引用的数据类型,当每次创建新的组件的时候,此时如果data不是一个函数的话,那么会把这个data数据的内存地址赋值给其他组件,这样就会出现一个问题就是当某个组件修改了data中的数据,那么所有的组件都会跟着修改,因为他们访问的是同一个内存地址; ==>引用数据类型的存储和读取
         *      4.如果把组件中的data当作一个函数来返回一个对象的话,这样是相当于每次在创建新的组件的时候都会开辟一块新的数据内存,每个组件之间的数据互不互影响,组件中的data当作函数的时候会产生一个闭包 ==>闭包
         *
         *
         */

        // let obj = {
        //     compNum: 0
        // }

        Vue.component("comp", {
            template: "#comp",
            data: function() {
                return {
                    compNum: 0
                }
            },
            // data:{
            //         compNum: 0
            //     }
        })

        //实例1
        const app1 = new Vue({
                el: "#app1"
            })
            //实例2
        const app2 = new Vue({
                el: "#app2"
            })
            //实例3
        const app3 = new Vue({
            el: "#app3"
        })
    </script>
    <script>
        // let obj = {
        //     a: 1
        // }

        function fn() {
            return {
                a: 1
            }
        }

        let obj1 = fn();
        let obj2 = fn();
        let obj3 = fn();

        obj1.a = 100;

        console.log(obj1); //a=100
        console.log(obj2); //a=1
        console.log(obj3); //a=1
    </script>
</body>

</html>